<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" color="#fff">
      <template #title><text style="color: #fff">订单</text></template>
    </GlobalTopBar>
    <view class="tops">
      <SearchInput
        placeholder="请输入订单号"
        @search="handleSearch"
        @clear="clearFun"
        color="#16BAAA"
      />
    </view>
    <!-- 内容 -->
    <view class="page_content">
      <!-- tabs -->
      <view class="tabs">
        <view
          :class="{ ac: indexs === index }"
          v-for="(item, index) in tabList"
          :key="index + 1"
          @click="indexs = index"
        >
          {{ item.text }}
        </view>
      </view>
      <!-- 列表内容 -->
      <scroll-view
        class="scroll-Y"
        scroll-y
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
        @scrolltolower="handleLoadMore"
        refresher-background="#f5f5f5"
        refresher-threshold="80"
      >
        <view class="libox" v-for="(item, index) in listData" :key="index + 1">
          <!-- 顶部文字 -->
          <view class="libox_tops border_b">
            <view
              class="flex"
              style="justify-content: space-between; margin-bottom: 10rpx"
            >
              <text
                class="t1 ac"
                @click.stop="copyFun(item.tid || item.service_order_tid)"
                >订单编号：{{ item.tid || item.service_order_tid }}</text
              >
              <text class="t2">{{
                tabList[item.work_status - 1]?.text ||
                (item.status === 3 ? '超时' : '拒单')
              }}</text>
            </view>
            <view class="flex"
              ><text class="t1">下单时间：{{ item.create_at }}</text></view
            >
          </view>
          <!-- 中间服务内容 -->
          <view class="v_h2">服务项目</view>
          <view class="li_center border_b">
            <view class="flex">
              <image
                class="cen_img"
                :src="item.service_order_goods_info.thumbnail"
                mode="aspectFill"
              />
              <view class="cen_text_box">
                <view>{{ item.service_order_goods_info.goods_title }}</view>
                <view style="color: #ff0000; font-weight: 500"
                  >￥{{ item.service_order_goods_info.buy_price }}</view
                >
              </view>
            </view>
            <view class="times" v-if="indexs === 5 && item.refuse_reason">
              <text class="times_t1">拒单原因</text>
              <text class="times_t2">{{ item.refuse_reason }}</text>
            </view>
            <view class="times" v-if="indexs === 5 && item.refuse_at">
              <text class="times_t1">拒单时间</text>
              <text class="times_t2">{{
                `${formatTimestamp(item.refuse_at, 'YYYY-MM-DD hh:mm:ss')}`
              }}</text>
            </view>
            <view class="times" v-else-if="indexs === 5 && item.expire_at">
              <text class="times_t1">超时时间</text>
              <text class="times_t2">{{
                `${formatTimestamp(item.expire_at, 'YYYY-MM-DD hh:mm:ss')}`
              }}</text>
            </view>
            <view class="times">
              <text class="times_t1">服务时间</text>
              <text class="times_t2">{{
                `${formatTimestamp(
                  item.appointment_start_time ||
                    item.service_order_info.appointment_start_time,
                  'YYYY-MM-DD hh:mm:ss',
                )}~${formatTimestamp(
                  item.appointment_end_time ||
                    item.service_order_info.appointment_end_time,
                  'hh:mm:ss',
                )}`
              }}</text>
            </view>
          </view>
          <!-- 客户信息 -->
          <view
            class="khinfo border_b"
            v-if="item.service_order_address_info?.contact_name"
          >
            <view class="khinfo_v1"> 客户信息 </view>
            <view class="khinfo_v2 flex">
              <text class="khinfo_v2_t1">客户姓名</text>
              <text class="khinfo_v2_t2"
                >{{ item.service_order_address_info.contact_name }}
                {{ item.service_order_address_info.phone }}</text
              >
              <uni-icons
                @click="handleCall(item.service_order_address_info.phone)"
                type="phone-filled"
                size="20"
                color="#4DD1C4"
              ></uni-icons>
            </view>
            <view class="khinfo_v3 flex">
              <text class="khinfo_v3_t1">客户地址</text>
              <text class="khinfo_v3_t2">{{
                `${item.service_order_address_info.province_name}${item.service_order_address_info.city_name}${item.service_order_address_info.district_name}${item.service_order_address_info.address}`
              }}</text>
              <uni-icons
                @click="dhFun(item)"
                type="location-filled"
                size="20"
                color="#4DD1C4"
              ></uni-icons>
            </view>
          </view>
          <!-- 问题描述 -->
          <view class="wtms border_b" v-if="item.order_img">
            <view class="khinfo_v2 flex">
              <text class="khinfo_v2_t1">问题描述</text>
              <text class="khinfo_v2_t2">{{ item.remark }}</text>
            </view>
            <view class="khinfo_v2 flex" style="align-items: flex-start">
              <text
                class="khinfo_v2_t1"
                style="flex-shrink: 0; white-space: nowrap"
                >故障图片</text
              >
              <template v-if="item.order_img">
                <image
                  v-for="(i, y) in item.order_img.split(',')"
                  :key="y + 1"
                  class="gzimg"
                  :src="i"
                  mode="aspectFill"
                  @click="previewFun(item.order_img.split(','), y)"
                />
              </template>
            </view>
          </view>
          <!-- 时间 -->
          <view
            class="sfbox"
            :class="{ border_b: item.work_status != 4 }"
            v-if="item.service_order_dispatch_record?.receive_at"
          >
            <view class="khinfo_v2 flex">
              <text class="khinfo_v2_t1">派单时间</text>
              <text class="khinfo_v2_t2">{{ item.create_at }}</text>
            </view>
            <view class="khinfo_v2 flex">
              <text class="khinfo_v2_t1">接单时间</text>
              <text class="khinfo_v2_t2">{{
                formatTimestamp(
                  item.service_order_dispatch_record.receive_at,
                  'YYYY-MM-DD hh:mm:ss',
                )
              }}</text>
            </view>
          </view>
          <view
            class="sfbox"
            :class="{ border_b: item.work_status != 4 }"
            v-if="
              item
                .service_order_pending_payment_balance_payment_transaction_record
                ?.id
            "
          >
            <view class="khinfo_v2 flex">
              <text class="khinfo_v2_t1">尾款支付时间</text>
              <text class="khinfo_v2_t2">{{
                formatTimestamp(
                  item
                    .service_order_pending_payment_balance_payment_transaction_record
                    ?.pay_at,
                  'YYYY-MM-DD hh:mm:ss',
                )
              }}</text>
            </view>
            <view class="khinfo_v2 flex">
              <text class="khinfo_v2_t1">尾款支付金额</text>
              <text class="khinfo_v2_t2">{{
                item
                  .service_order_pending_payment_balance_payment_transaction_record
                  ?.balance_payment_amount
              }}</text>
            </view>
            <view class="khinfo_v2 flex">
              <text class="khinfo_v2_t1">是否已支付</text>
              <text class="khinfo_v2_t2">{{
                item
                  .service_order_pending_payment_balance_payment_transaction_record
                  ?.status === 1
                  ? '未支付'
                  : '已支付'
              }}</text>
            </view>
          </view>
          <view
            class="sfbox flex"
            v-if="times && [1].includes(item.work_status)"
          >
            接单倒计时：
            <uni-countdown
              :show-day="false"
              :hour="countdown(item).hours"
              :minute="countdown(item).minutes"
              :second="countdown(item).seconds"
              @timeup="timeupFun(item)"
            ></uni-countdown>
          </view>
          <!-- 开始服务按钮 -->
          <view class="fw_btn flex">
            <picker
              v-if="[1].includes(item.work_status)"
              @change="(e) => bindPickerChange(e, item)"
              @click="store.tzqxFun()"
              value="id"
              :range="ReasonList"
              range-key="refuse_reason_title"
            >
              <view class="jdbtn">拒单</view>
            </picker>
            <view
              class="btns"
              v-if="[1].includes(item.work_status)"
              @click="doSaveServiceOrderAcceptByWorker(item)"
              >接单</view
            >
            <view
              class="btns"
              v-else-if="[2].includes(item.work_status)"
              @click="(isShow2 = true), (items = item)"
              >开始服务</view
            >
            <template v-else-if="[3].includes(item.work_status)">
              <view
                v-if="
                  item
                    .service_order_pending_payment_balance_payment_transaction_record
                    ?.status != 1
                "
                class="btns ac mr"
                @click="(isShow2 = true), (items = item)"
                >完结订单</view
              >
              <template
                v-if="
                  item
                    .service_order_pending_payment_balance_payment_transaction_record
                    ?.id &&
                  item
                    .service_order_pending_payment_balance_payment_transaction_record
                    ?.status === 1
                "
              >
                <view
                  class="btns ac mr"
                  @click.stop="
                    wxAppDoSaveServiceOrderPayByCashByWorker(
                      item
                        .service_order_pending_payment_balance_payment_transaction_record
                        .id,
                    )
                  "
                  >现金支付</view
                >
                <view class="btns" @click="fjfyFun(item)">修改费用</view>
              </template>
              <view
                v-if="
                  !item
                    .service_order_pending_payment_balance_payment_transaction_record
                    ?.id
                "
                class="btns"
                @click="fjfyFun(item)"
                >附加费用</view
              >
            </template>
          </view>
        </view>
        <view class="worder_box flex_center" v-if="!listData.length">
          <image :src="`${store.imgDomain}order_4.png`" mode="scaleToFill" />
          <text>暂无订单</text>
        </view>
      </scroll-view>
    </view>
    <!-- 开始服务 -->
    <view class="fwbox" :class="{ ac: isShow2 }">
      <view class="fw_center">
        <image
          @click="isShow2 = false"
          class="close_img"
          :src="`${store.imgDomain}close.png`"
          mode="scaleToFill"
        />
        <view class="t1">{{
          isBz ? '附加费用' : ['开始服务', '完成服务'][items.work_status - 2]
        }}</view>
        <view
          class="form_item border_b flex"
          v-if="items.work_status === 3 && isBz"
        >
          <view class="label">附加金额：</view>
          <input
            class="inps"
            v-model="fromDttas.balance_payment_amount"
            type="number"
            placeholder="请输入附加金额"
          />
        </view>
        <view class="t2"
          >{{
            isBz
              ? '上传工件照片'
              : ['上传服务前照片', '上传服务完成照片'][items.work_status - 2]
          }}（最多上传5张）</view
        >
        <view class="imgboxs">
          <view class="ulimgbox" v-if="imgList.length">
            <view class="lib" v-for="(item, index) in imgList" :key="index + 1">
              <image :src="item" mode="aspectFill" />
              <view class="close2" @click="imgList.splice(index, 1)">
                <image
                  class="close2_img"
                  :src="`${store.imgDomain}close2.png`"
                  mode="scaleToFill"
                />
              </view>
            </view>
          </view>

          <view
            class="scb flex_center"
            @click="chooseImage"
            v-if="imgList.length < 5"
          >
            <uni-icons type="plusempty" size="30" color="#4D738D"></uni-icons>
          </view>
        </view>
        <view class="form_item ac" v-if="items.work_status === 3 && isBz">
          <view class="label">备注：</view>
          <textarea
            class="textareain border"
            v-model="fromDttas.balance_payment_remark"
            type="text"
            placeholder="请输入备注"
          />
        </view>
        <!-- 提交 -->
        <view class="btnbox">
          <view class="qx" @click="isShow2 = false">取消</view>
          <view class="tj" @click="doSaveServiceOrderBeginByWorker">提交</view>
        </view>
      </view>
    </view>
    <!-- 备注 -->
    <view class="fwbox" :class="{ ac: isShow }">
      <view class="fw_center">
        <image
          @click="isShow = false"
          class="close_img"
          :src="`${store.imgDomain}close.png`"
          mode="scaleToFill"
        />
        <view class="t1">拒单描述</view>
        <view class="t2"></view>
        <view class="imgboxs">
          <textarea
            class="textarea border"
            style="height: 120rpx"
            type="text"
            v-model="jdform.refuse_desc"
            placeholder="请输入拒单描述"
          />

          <!-- 提交 -->
          <view class="btnbox">
            <view class="qx" @click="isShow = false">取消</view>
            <view class="tj" @click="jdtjFun">提交</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部菜单 -->
    <tabBar
      :current-index="1"
      :tab-list="store.tabList2"
      :style-config="{ activeColor: '#6ECDC1', inactiveColor: '#666666' }"
    ></tabBar>
  </view>
</template>

<script setup>
import { ref, computed, onBeforeMount, watch, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import tabBar from '@/components/tabBar.vue';
import SearchInput from '@/components/SearchInput.vue';

const jdform = reactive({
  service_order_id: '',
  refuse_reason: '',
  refuse_desc: '',
  historyscore_reduce: '',
});
const imgList = ref([]);
const isBz = ref(false);
const searchResult = ref('');
const store = useCounterStore();
const userInfo = ref({});
const userAddressList = ref([]);
const isTrue = ref(false);
const isXq = ref(false);
const isShow2 = ref(false);
const indexs = ref(0);
// 列表数据相关
const listData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const isNext = ref(true);
const items = ref({});
// 状态控制
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const datas = ref({});
const fromDttas = reactive({
  balance_payment_amount: '',
  balance_payment_remark: '',
});
const tabList = [
  // {
  //   text: '全部',
  //   work_status: 0,
  // },
  {
    text: '待接单',
    work_status: 1,
  },
  {
    text: '待服务',
    work_status: 2,
  },
  {
    text: '服务中',
    work_status: 3,
  },
  {
    text: '已完成',
    work_status: 4,
  },
  {
    text: '售后',
    work_status: 5,
  },
  {
    text: '超时/拒单',
    // work_status: 6,
  },
];

const handleCall = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone, // 要拨打的电话号码（字符串类型）
    success: () => {
      console.log('拨打电话请求已发出');
    },
  });
};

watch(
  () => isShow2.value,
  (val) => {
    if (!val) {
      isBz.value = false;
      fromDttas.balance_payment_amount = '';
      fromDttas.balance_payment_remark = '';
      imgList.value = [];
    }
  },
);

watch(
  () => indexs.value,
  (val) => {
    pageNum.value = 1;
    getServiceOrderListByWorkStatus(true);
  },
);
//
const getServiceOrderListByWorkStatus = async (isRefresh = false, n) => {
  if (!n) {
    request('wxapp/common/getTimeStamp').then((res) => {
      times.value = res * 1000;
    });
  }

  if (isRefresh) {
    pageNum.value = 1;
  }
  let url =
    indexs.value === 5
      ? 'worker/order/getServiceOrderDispatchRecordListByWorker'
      : 'worker/order/getServiceOrderListByWorkStatus';
  try {
    const data = await request(url, {
      work_status: tabList[indexs.value].work_status || '',
      keywords: searchResult.value,
      currpage: pageNum.value,
      pagesize: pageSize.value,
    });
    isNext.value = data.page.isNext;
    if (isRefresh) {
      listData.value = [...data.list];
    } else {
      listData.value = [...listData.value, ...data.list];
    }
  } finally {
    isRefreshing.value = false;
    isLoading.value = false;
  }
};

// 复制文本
const copyFun = (text) => {
  // 复制文本到剪贴板
  uni.setClipboardData({
    data: text, // 要复制的文本
    success: function () {
      console.log('复制成功');
      // 可添加提示信息（如 Toast）
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      });
    },
    fail: function (err) {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
      });
    },
  });
};

// 预览图片
const previewFun = (list, index) => {
  uni.previewImage({
    current: index,
    urls: list,
    loop: true,
  });
};

// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getServiceOrderListByWorkStatus(true);
};

// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getServiceOrderListByWorkStatus();
};

// 处理搜索事件
const handleSearch = (keyword) => {
  searchResult.value = keyword;
  getServiceOrderListByWorkStatus(true);
};

const clearFun = () => {
  searchResult.value = '';
  pageNum.value = 1;
  getServiceOrderListByWorkStatus(true);
};

const countdown = computed(() => {
  return (item) => {
    // 1. 先算总毫秒差值（关键：保留秒级精度的基础）
    let totalMsDiff =
      item.service_order_dispatch_record.expire_at * 1000 - times.value;
    if (totalMsDiff < 0) {
      totalMsDiff = 0;
    }
    // 2. 基于总毫秒差，依次拆解小时、分钟、秒
    const hours = Math.floor(totalMsDiff / (3600 * 1000)); // 1小时 = 3600*1000 毫秒
    const remainingMsAfterHours = totalMsDiff % (3600 * 1000); // 去掉小时后的剩余毫秒

    const minutes = Math.floor(remainingMsAfterHours / (60 * 1000)); // 1分钟 = 60*1000 毫秒
    const remainingMsAfterMinutes = remainingMsAfterHours % (60 * 1000); // 去掉分钟后的剩余毫秒

    const seconds = Math.floor(remainingMsAfterMinutes / 1000); // 剩余毫秒转秒，取整

    return {
      hours,
      minutes,
      seconds, // 最终补充秒数
    };
  };
});

// 上传图
const chooseImage = () => {
  uni.chooseImage({
    count: 5 - imgList.value.length,
    sourceType: ['album', 'camera'], // 可选择相册或相机（拍照）
    success: (res) => {
      res.tempFilePaths.forEach((tempFilePath) => {
        onChooseAvatar(tempFilePath); // 单独的单张上传函数
      });
    },
    fail: (err) => {
      console.log('选择图片失败', err);
    },
  });
};
// 选择头像回调
const onChooseAvatar = (tempFilePaths) => {
  uni.uploadFile({
    url: 'https://adm.jinjiangservice.com/index.php/wxapp/common/uploadCommonImage',
    method: 'POST',
    filePath: tempFilePaths.detail?.avatarUrl || tempFilePaths,
    formData: {
      file: tempFilePaths.detail?.avatarUrl || tempFilePaths,
    },
    header: {
      'Content-Type': 'multipart/form-data',
    },
    name: 'file',
    success(res) {
      imgList.value.push(JSON.parse(res.data).data.path);
    },
  });
};

// 师傅接单超时
const timeupFun = async (item) => {
  if (!item.id) return;
  await request(
    'worker/order/doSaveServiceOrderAcceptExpireByWoker',
    { service_order_id: item.id },
    'post',
  );
  getServiceOrderListByWorkStatus(true, 1);
};
const ReasonList = ref([]);
// 获取所有可以选择的拒单原因备选数据
const getRefuseReasonListForWorker = async () => {
  ReasonList.value = await request('worker/order/getRefuseReasonListForWorker');
};
const isShow = ref(false);
// 选中拒单原因
const bindPickerChange = (e, item) => {
  jdform.service_order_id = item.id;
  isShow.value = true;
  jdform.refuse_reason = ReasonList.value[e.detail.value].refuse_reason_title;
};
// 师傅拒单
const jdtjFun = async () => {
  await request(
    'worker/order/doSaveRefuseServiceOrderByWorker',
    jdform,
    'post',
  );
  isShow.value = false;
  jdform.refuse_reason = '';
  getServiceOrderListByWorkStatus(true);
};

const dhFun = (item) => {
  uni.openLocation({
    latitude: +item.service_order_address_info.latitude,
    longitude: +item.service_order_address_info.longitude,
  });
};

// 保存开始服务||完结订单接口
const doSaveServiceOrderBeginByWorker = async () => {
  console.log(items.value, isBz.value);

  let urlarr = [
    'worker/order/doSaveServiceOrderBeginByWorker',
    'worker/order/doSaveServiceOrderFinishByWorker',
  ];
  let datas = {
    service_order_id: items.value.id,
  };
  if (items.value.work_status === 2) {
    datas.begin_img = imgList.value.join(',');
  } else if (items.value.work_status === 3) {
    datas.finish_img = imgList.value.join(',');
    if (isBz.value) {
      datas.balance_payment_img = imgList.value.join(',');
      if (!fromDttas.balance_payment_amount) {
        uni.showToast({
          title: '请输入附加金额',
          icon: 'none',
        });
        return;
      }
      datas.balance_payment_amount = fromDttas.balance_payment_amount;
      datas.balance_payment_remark = fromDttas.balance_payment_remark;
      if (
        fromDttas.service_order_pending_payment_balance_payment_transaction_record_id
      ) {
        datas.service_order_pending_payment_balance_payment_transaction_record_id =
          fromDttas.service_order_pending_payment_balance_payment_transaction_record_id;
      }
      urlarr[1] = 'worker/order/doSaveServiceOrderBalancePaymentByWorker';
    }
  }
  await request(urlarr[items.value.work_status - 2], datas, 'post');

  if (!isBz.value) {
    indexs.value = items.value.work_status;
  }
  isShow2.value = false;
  items.value = {};
  getServiceOrderListByWorkStatus(true);
};
const xgpriceFun = (item) => {
  isShow2.value = true;
  items.value = item;
  isBz.value = true;
  fromDttas.balance_payment_amount =
    item.service_order_pending_payment_balance_payment_transaction_record.balance_payment_amount;
  fromDttas.service_order_pending_payment_balance_payment_transaction_record_id =
    item.service_order_pending_payment_balance_payment_transaction_record.id;
  fromDttas.balance_payment_remark =
    item.service_order_pending_payment_balance_payment_transaction_record.balance_payment_remark;
  if (
    item.service_order_pending_payment_balance_payment_transaction_record
      .balance_payment_img
  )
    imgList.value =
      item.service_order_pending_payment_balance_payment_transaction_record.balance_payment_img.split(
        ',',
      );
};

// 师傅接单
const doSaveServiceOrderAcceptByWorker = async (item) => {
  store.tzqxFun();
  uni.showModal({
    title: '提示',
    content: '确定要接单吗？',
    confirmText: '确定', // 确认按钮文字
    cancelText: '取消', // 取消按钮文字
    success: async (res) => {
      if (res.confirm) {
        await request(
          'worker/order/doSaveServiceOrderAcceptByWorker',
          { service_order_id: item.id },
          'post',
        );
        indexs.value = 1;
      }
    },
    fail: (err) => {
      console.error('显示模态框失败', err);
    },
  });
};

// 现金支付
const wxAppDoSaveServiceOrderPayByCashByWorker = async (id) => {
  uni.showModal({
    title: '提示',
    content: '确定现金支付吗？',
    confirmText: '确定', // 确认按钮文字
    cancelText: '取消', // 取消按钮文字
    success: async (res) => {
      if (res.confirm) {
        const { data } = await request(
          'worker/order/doSaveServiceOrderPayByCashByWorker',
          {
            service_order_pending_payment_balance_payment_transaction_record_id:
              id,
          },
          'post',
        );
        getServiceOrderListByWorkStatus(true);
      }
    },
    fail: (err) => {
      console.error('显示模态框失败', err);
    },
  });
};

const fjfyFun = (item) => {
  store.balanceData = { ...item };
  store.to('/pages/master/order/fjje');
};

const times = ref(0);
onBeforeMount(() => {
  request('wxapp/common/getTimeStamp').then((res) => {
    times.value = res * 1000;
  });
  store
    .getParamValByKey('waiting_accept_service_order_expire_historyscore_reduce')
    .then((res) => {
      jdform.historyscore_reduce = res;
    });
});
onShow(() => {
  getServiceOrderListByWorkStatus(true);
});

onLoad((option) => {
  indexs.value = +option.index || 0;
  getRefuseReasonListForWorker(true);
});
</script>

<style lang="scss" scoped>
.topbars {
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
}
.scroll-Y {
  height: 68vh;
}
.tops {
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  background: linear-gradient(to right, #2bc1ac, #10b3a2);
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  font-size: 24rpx;
  margin-bottom: 15rpx;
  view {
    position: relative;
    width: max-content;
    &.ac {
      color: #16baaa;
      &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 3rpx;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        background-color: #16baaa;
      }
    }
  }
}
.scroll-Y {
  max-height: 80vh;
}
.libox {
  border-radius: 20rpx;
  border: 1rpx solid #71cdc4;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  // font-size: 24rpx;
  .libox_tops {
    padding-bottom: 25rpx;
    margin-bottom: 20rpx;

    .t1 {
      color: #999;
      &.ac {
        color: #437ef6;
        text-decoration: underline;
      }
    }
    .t2 {
      color: #ff7800;
    }
  }
  .li_center {
    padding-bottom: 20rpx;
    .cen_img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
      margin-right: 40rpx;
    }
    .cen_text_box {
      font-size: 30rpx;
      font-weight: 700;
      line-height: 40rpx;
    }
    .cen_sl {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      view {
        width: max-content;
      }
    }
    .times {
      margin-top: 10rpx;
      .times_t1 {
        color: $uni-text-color-grey;
        margin-right: 10rpx;
      }
    }
  }
  .khinfo {
    line-height: 40rpx;
    padding: 20rpx 0;
    .khinfo_v2_t1,
    .khinfo_v3_t1 {
      color: $uni-text-color-grey;
      margin-right: 25rpx;
    }
  }
  .wtms {
    line-height: 40rpx;
    padding: 20rpx 0;
    .khinfo_v2_t1,
    .khinfo_v3_t1 {
      color: $uni-text-color-grey;
      margin-right: 25rpx;
    }
    .gzimg {
      width: 105rpx;
      height: 105rpx;
      margin-right: 10rpx;
      border-radius: 5rpx;
    }
  }
  .sfbox {
    line-height: 40rpx;
    padding: 20rpx 0;
    .khinfo_v2 {
      display: flex;
      justify-content: space-between;
    }
    .khinfo_v2_t1,
    .khinfo_v3_t1 {
      color: $uni-text-color-grey;
      margin-right: 25rpx;
    }
    .khinfo_v2_t2 {
      font-weight: 500;
    }
  }
  .fw_btn {
    padding: 20rpx 0 0;
    color: #fff;
    justify-content: flex-end;
    .btns {
      line-height: 46rpx;
      border-radius: 23rpx;
      width: max-content;
      padding: 0 30rpx;
      background-color: #15cbb9;
      border: 1rpx solid #15cbb9;
      &.ac {
        background-color: transparent;
        color: #15cbb9;
      }
    }
    .jdbtn {
      border: 1rpx solid #999;
      color: #999;
      margin-right: 10rpx;
      line-height: 46rpx;
      border-radius: 23rpx;
      width: max-content;
      padding: 0 30rpx;
    }
  }
}
.v_h2 {
  margin-bottom: 20rpx;
}
.fwbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  &.ac {
    opacity: 1;
    pointer-events: all;
  }
  .fw_center {
    position: relative;
    width: 90%;
    border: 1rpx solid #9e9e9e;
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .t1 {
      font-size: 30rpx;
      margin-bottom: 40rpx;
    }
    .t2 {
      margin-bottom: 20rpx;
    }
    .imgbox {
      .libox {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .btnbox {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      view {
        line-height: 46rpx;
        border-radius: 23rpx;
        padding: 0 50rpx;
      }
      .qx {
        color: #14c7b6;
        border: 1rpx solid #14c7b6;
      }
      .tj {
        margin-left: 20rpx;
        color: #fff;
        background-color: #15c9b7;
        border: 1rpx solid #15c9b7;
      }
    }
  }
}
.ulimgbox {
  margin: 20rpx 0;
  display: flex;
  flex-wrap: wrap;

  .lib {
    width: 150rpx;
    margin-bottom: 20rpx;
    margin-right: 10rpx;
    display: flex;
    flex-direction: column;
    position: relative;
    .close2_img {
      position: absolute;
      top: -15rpx;
      right: -15rpx;
      width: 30rpx;
      height: 30rpx;
    }
    image {
      border-radius: 20rpx;
      width: 150rpx;
      height: 150rpx;
    }
  }
}
.scb {
  margin-top: 20rpx;
  border: 1rpx dashed #92bfc2;
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}
.close_img {
  background-color: #fff;
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  width: 62rpx;
  height: 62rpx;
  border-radius: 50%;
}
.worder_box {
  flex-direction: column;
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  image {
    width: 374rpx;
    height: 288rpx;
    margin-bottom: -20rpx;
  }
  text {
    color: $uni-text-color-grey;
  }
}
.textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 20rpx;
}
.form_item {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  font-size: 24rpx;
  margin-bottom: 10rpx;
  &.ac {
    flex-direction: column;
    align-items: flex-start;
  }
  .inps {
    box-sizing: border-box;
    padding-left: 30rpx;
    flex: 1;
    text-align: right;
  }
  .select {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.textareain {
  width: 100%;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 20rpx;
  margin-top: 20rpx;
}
</style>
